;(function($){
    $(function(){

        var imgIndex=0;
        function autoplay(){
            imgIndex++;
            if(imgIndex>3){
                imgIndex=1;
                $(".imgs").css("left",0)
            }
            $(".imgs").css({left:-286*imgIndex})
        }
        var timer=setInterval(autoplay,2000)

        var numImg=0;
        $(".left").on("click",function(){
            if(numImg==3){
                return;
            }
            numImg++;
            $(".imgs").css({left : -286*numImg})
        })
        $(".right").on("click",function(){
            if(numImg==0){
                return;
            }
            numImg--;
            $(".imgs").css({left : -286*numImg})
        })

        $("#middleImg").on("mouseenter",function(){
            $("#bigArea").css("display","block");
            $("#middleArea").css("display","block");

            $("#middleImg").on("mousemove",function(e){
                var mX=e.pageX-$("#fdj").offset().left-middleArea.offsetWidth/2;
                var mY=e.pageY-$("#fdj").offset().top-middleArea.offsetHeight/2;
                if(mX<=0){
                    mX=0
                }
                if(mY<=0){
                    mY=0
                }
                if(mX>$("#middleImg").width()-$("#middleArea").width()){
                    mX=$("#middleImg").width()-$("#middleArea").width()
                }
                if(mY>$("#middleImg").height()-$("#middleArea").height()){
                    mY =$("#middleImg").height()-$("#middleArea").height()
                }

                $("#middleArea").css("left",mX);
                $("#middleArea").css("top",mY);

                $("#bigArea img").css("left",mX*-Scale/3);
                $("#bigArea img").css("top",mY*-Scale/3)
            })
        })
        $("#middleImg").on("mouseleave",function(){
            $("#middleArea").css("display","none");
            $("#bigArea").css("display","none");
        });
        //2  小区域=(小图/大图)*大区域


        var middleWidth=(parseInt($("#middleImg").width())/parseInt($("#bigImg").width()))
            *parseInt($("#bigArea").width());
        var middleHeight=(parseInt($("#middleImg").height())/parseInt($("#bigImg").height()))
            *parseInt($("#bigArea").height());


        $("#middleArea").css("left",middleWidth);
        $("#middleArea").css("top",middleHeight);

        // 3 求出比例   小图/小区域=大图/大区域

        var Scale=parseInt($("#middleImg").width())/parseInt($("#middleArea").width());

        console.log(Scale);
        $("#small li").on("click",function(){
            $index=$(this).index();
            $("#middleImg img").eq($index).show().siblings("img").hide();
            $index=$(this).index();

            $("#bigArea img").eq($index).show().siblings("img").hide();
            $("#middleImg").on("mouseenter",function(){
                $index=$(this).index();
                $("#bigArea #bigImg").eq($index).show().siblings("#bigImg").hide();
            })
            $("#middleImg").on("mouseleave",function(){
                $("#bigArea #bigImg").hide()
            })



        })





    })
})(jQuery);